<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖动和伸缩元素</title>
    <style>
        #resize-wrapper {
            margin: 0 auto;
            position: relative;
            width: 1200px;
            height: 1000px;
            background: #EEE;
        }
        .resize-item {
            position: absolute;
            text-align: center;
            cursor: move;
            border: 1px dashed red;
            font-size: 20px;
            font-weight: bold;
            color: red;
            user-select: none;
            box-sizing: border-box;
        }
        .resize {
            width: 12px;
            height: 12px;
            position: absolute;
            background-color: red;
        }
        .resize.nw {
            left: 0;
            top: 0;
            cursor: nw-resize;
        }
        .resize.ne {
            right: 0;
            top: 0;
            cursor: ne-resize;
        }
        .resize.se {
            right: 0;
            bottom: 0;
            cursor: se-resize;
        }
        .resize.sw {
            left: 0;
            bottom: 0;
            cursor: sw-resize;
        }
    </style>
</head>
<body>
    <div id="resize-wrapper">
        <div class="resize-item" style="left: 150px; top: 50px; width: 300px; height: 300px; line-height: 300px;">
            <div class="nw resize"></div>
            <div class="ne resize"></div>
            <div class="se resize"></div>
            <div class="sw resize"></div>
            <span>1</span>
        </div>

        <div class="resize-item" style="left: 450px; top: 350px; width: 300px; height: 300px; line-height: 300px;">
            <div class="nw resize"></div>
            <div class="ne resize"></div>
            <div class="se resize"></div>
            <div class="sw resize"></div>
            <span>2</span>
        </div>

        <div class="resize-item" style="left: 750px; top: 650px; width: 300px; height: 300px; line-height: 300px;">
            <div class="nw resize"></div>
            <div class="ne resize"></div>
            <div class="se resize"></div>
            <div class="sw resize"></div>
            <span>3</span>
        </div>
    </div>

    <script>
        window.onload = function(){
            document.getElementById('resize-wrapper').onmousedown = function(e){
                var e = e || window.event
                    ,oDiv = e.target || e.srcElement
                    ,oBox;

                if(!oDiv.className) { // 如果点击的是span
                    oDiv = oDiv.parentNode;
                    oBox = oDiv;
                } else if(oDiv.className.indexOf("resize")) { //如果点击的是四个顶点
                    oBox = oDiv.parentNode;
                } else if(oDiv.className == "resize-item") { //如果点击的就是resize-item
                    oBox = oDiv;
                }
                let cursor = getComputedStyle(oDiv,null).cursor;

                //获取鼠标点击的位置、链接元素的位置、链接元素的宽高
                let x = e.clientX;
                let y = e.clientY;
                let oBoxL = oBox.offsetLeft;
                let oBoxT = oBox.offsetTop;
                let oBoxW = oBox.offsetWidth;
                let oBoxH = oBox.offsetHeight;

                document.onmousemove = (e)=>{
                    e = e || event;
                    let xx = e.clientX;
                    let yy = e.clientY;
                    switch(cursor) {
                        case 'move': //移动当前元素
                            oBox.style.top = oBoxT + yy - y + 'px';
                            oBox.style.left = oBoxL + xx - x + 'px';
                            break;
                        case 'nw-resize':
                            oBox.style.top = oBoxT + yy - y + 'px';
                            oBox.style.left = oBoxL + xx - x + 'px';
                            oBox.style.width = oBoxW + x - xx + 'px';
                            oBox.style.height = oBoxH + y - yy + 'px';
                            oBox.style.lineHeight = oBox.style.height;
                            break;
                        case 'ne-resize':
                            oBox.style.top = oBoxT + yy - y + 'px';
                            oBox.style.width = oBoxW + xx - x + 'px';
                            oBox.style.height = oBoxH + y - yy + 'px';
                            oBox.style.lineHeight = oBox.style.height;
                            break;
                        case 'se-resize':
                            oBox.style.width = oBoxW + xx - x + 'px';
                            oBox.style.height = oBoxH + yy - y + 'px';
                            oBox.style.lineHeight = oBox.style.height;
                            break;
                        case 'sw-resize':
                            oBox.style.left = oBoxL + xx - x + 'px';
                            oBox.style.width = oBoxW + x - xx + 'px';
                            oBox.style.height = oBoxH + yy - y + 'px';
                            oBox.style.lineHeight = oBox.style.height;
                            break;
                    }
                };
                document.onmouseup = (e) => {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
                if (e.preventDefault) {
                    e.preventDefault();
                }
            };
        };
    </script>
</body>
</html>